<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<!-- css样式引入开始 -->
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/index-banner.css"/>
<link rel="stylesheet" type="text/css" href="css/css.css"/>
<!-- css样式引入结束 -->
<style type="text/css">
/* 整体样式开始 */
body {
	font-size: 12px; /* 字体大小 */
    color: #333;	/* 字体颜色 */
    font-family: Arial, Helvetica, sans-serif,"微软雅黑";  /* 字体样式设置 */
}
/* 整体样式结束 */

.fl {
	float: left; /* 浮动向左 */
	zoom: 1;
}

.fr {
	float: right; /* 浮动向右 */
	zoom: 1;
}

a:hover {
	text-decoration: underline;  /* 鼠标浮动于文字这上显示下划线 */
}

.h-top {
	width: 100%;
	overflow: hidden; /* 多出来的部分隐藏 */
}

.t-top {
    height: 70px;
    background: url(img/topbar.png) repeat-x 0 -80px;  /* 设置背景图片 平铺的位置是x坐标为0 Y坐标为-80px */
}

.t-wrap {

	width: 1100px;
	height: 70px;
    margin: 0 auto;

}

.logo {

	width: 176px;
	
}

.logo a {
    width: 157px;
    height: 33px;
    padding: 22px 20px 0 0;
    background: url(img/topbar.png) no-repeat 0 15px;
    text-indent: -9999px;
}

.top-nav {
	height: 70px;
}

.top-nav a {
	float: left;
	zoom: 1;
	padding-left: 2px;
    font-size: 14px;
    line-height: 70px;
    color: #ccc;
    background: url(img/topbar.png) no-repeat left -300px;
}

.top-nav a:hover {
    background-position: left -470px;
}

.top-nav a span {
	float: left;
	zoom: 1;
	padding: 0 20px 0 18px;
	background: url(img/topbar.png) no-repeat right -300px;
}

.cor {

	display: none;
    position: absolute;
    left: 50%;
    top: 63px;
    width: 14px;
    height: 9px;
    margin-left: -7px;
    background: url(img/topbar.png) no-repeat -226px 0;

}

.top-nav .active {
	position: relative;
    margin: 0 -1px;
    background-position: left -155px;
}

.top-nav .active span {
	padding: 0 21px 0 19px;
    background-position: right -155px;
}

.top-nav .active .cor {
	display: block;
}

.top-nav .last {
	position: relative;
}

.top-nav .last span {
	background: none;
	padding-right: 40px;
}

.top-nav .last .hot {
    position: absolute;
    top: 20px;
    left: 90px;
    width: 28px;
    height: 19px;
    background: url(img/topbar.png) no-repeat -190px 0;
}

.search {
	margin-top: 21px;
    width: 210px;
    height: 31px;
    background: url(img/topbar.png) no-repeat 0 -550px;
}

.search input {
	background: none;
	border: none;
	margin: 8px 0 0 33px;
	width: 170px;
	font: 12px/1 "微软雅黑";
	color: #9b9b9b;
}

.landing {
	position: relative;
    height: 45px;
    margin: 21px 0 0 19px;
    padding: 0 22px 0 0;
    background: url(img/topbar.png) no-repeat right -366px;
}

.landing .link {
	width: 28px;
    margin-top: 10px;
    color: #787878;
}

.landing:hover {
	background-position: right -405px;
}

.landing:hover .link {
	color: #999;
}

.landing:hover .down-tab {
	display: block;
}

.down-tab {
	display: none;	
    position: absolute;
    top: 38px;
    right: -43px;
    width: 158px;
    border: 1px solid #000;
    border-radius: 4px;
    background: #2a2a2a;
    z-index: 9999;
}

.d-list li {
	float: left;
	zoom: 1;
}

.d-list li a {
	float: left;
	zoom: 1;
    width: 132px;
    height: 38px;
    padding-left: 24px;
    overflow: hidden;
    color: #ccc;
    line-height: 39px;
}

.d-list li a:hover {
	color: #fff;
	background: #353535;
}

.d-icon {
	float: left;
	zoom: 1;
    width: 18px;
    height: 18px;
    margin: 10px 10px 0 -7px;
    background: url(img/toplist.png) no-repeat 0 9999px;
}

.d-icon1 {
	background-position: 0 0;
}

.d-icon2 {
	background-position: -20px -20px;
}

.d-icon3 {
	background-position: -20px -40px;
}

.d-icon4 {
	background-position: 0 -20px;
}
.d-icon5 {
	background-position: 0 -40px;
}
.n-nav {
	height: 35px;
	background: url(img/topbar.png) repeat-x 0 -230px;
}
.n-wrap {
	width: 911px;
    padding-left: 168px;
    margin: 0 auto;
}
.nav {
	height: 35px;
	overflow: hidden;
}
.nav a {
	float: left;
	zoom: 1;
	margin: 0 17px;
	padding: 0 0 0 14px;
    line-height: 37px;
    color: #fff;
    overflow: hidden;
}
.nav a span {
	float: left;
	padding: 0 14px 0 0;
}
.nav a:hover,
.nav .n-active {
	background: url(img/topbar.png) no-repeat left -268px;
}
.nav a:hover span,
.nav .n-active span {
	background: url(img/topbar.png) no-repeat right -268px;
}
.bottom {
    height: 140px;
    overflow: hidden;
    border-top: 1px solid #d3d3d3;
    background: #f2f2f2;
}
.f-footer {
	width: 980px;
    margin: 0 auto;
}
.f-left {
    width: 490px;
    padding-top: 35px;
    line-height: 24px;
    color: #666;
}
.f-left nav a {
	color: #999;
}
.f-left nav .line {
	margin: 0 8px 0 10px;
    color: #c2c2c2;
}
.company {
	margin-left: 14px;
}
.company a {
	color: #666;
}
.f-right {
    width: 330px;
    margin-top: 21px;
}
.f-right li {
	float: left;
	zoom: 1;
	margin-left: 30px;
}
.f-right li a {
	float: left;
	zoom: 1;
    width: 60px;
    height: 70px;
    color: #999;
    font-size: 0;
}
.f-right .f-musicia {
	margin: 0;
}
.f-logo {
	background: url(img/foot_enter.png) no-repeat -60px -80px;
}
.f-logo2 {
	background-position: 0 -80px;
}
.f-logo3 {
	background-position: 0 0px;
}
.f-logo4 {
	background-position: -60px 0px;
}
.main {
	overflow: hidden;
    background: #f2f2f2;
}
.m-wrap {
	overflow: hidden;
	margin: 0 auto;
	width: 980px;
	border: 1px solid #d3d3d3;
	border-bottom: none;
	background: #fff;
}
.m-left {
	float: left;
	zoom: 1;
	width: 689px;
    padding: 20px 20px 40px;
    border-right: 1px solid #d3d3d3;
}
.m-right {
	float: right;
}
.tab {
    width: 250px;
}
.user {
    height: 126px;
    background: url(img/singer/index.png) no-repeat 0 0;
}
.user p {
    width: 205px;
    margin: 0 auto;
    padding: 16px 0;
    line-height: 22px;
    color: #666;
}
.user a {
	margin: 0 auto;
	display: block;
	width: 100px;
    height: 31px;
    line-height: 31px;
    text-align: center;
    color: #fff;
    background: url(img/singer/index.png) no-repeat 0 -195px;
}
.m-singer {
    margin-top: 15px;
}
.m-singer h3 {
	height: 23px;
    margin: 0 20px;
    border-bottom: 1px solid #ccc;
    color: #333;
}
.m-singer h3 p {
	float: left;
	zoom: 1;
}
.m-singer h3 a {
	float: right;
	zoom: 1;
	color: #666;
}
.m-singer ul {
	margin: 6px 0 14px 20px;
}
.m-singer li {
    float: left;
    zoom: 1;
    margin-top: 14px;
}
.m-singer li a {
    float: left;
    zoom: 1;
    width: 210px;
    height: 62px;
    background: #fafafa;
}
.m-singer li a:hover {
	background: #f4f4f4;
}
.s-photo {
	float: left;
	zoom: 1;
    width: 62px;
    height: 62px;
}
.s-photo img {
    width: 62px;
    height: 62px;
}
.s-info {
    float: left;
    zoom: 1;
    width: 133px;
    height: 60px;
    padding-left: 14px;
    border: 1px solid #e9e9e9;
    border-left: none;
}
.s-info h4 {
	margin-top: 8px;
	font-size: 14px;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}
.s-info p {
    margin-top: 8px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.apply {
	margin-left: 20px;
}
.apply a {
	display: inline-block;
    padding: 0 5px 0 0;
    border-radius: 4px;
    background: url(img/singer/button2.png) no-repeat right -100px;
    color: #333;
}
.apply a span {
	display: inline-block;
	width: 170px;
    padding: 0 15px 0 20px;
    line-height: 31px;
    vertical-align: top;
    text-align: center;
    font-weight: bold;
    background: url(img/singer/button2.png) no-repeat 0 -59px;
}
.hotdj {
    margin-top: 30px;
}
.hotdj h3 {
    height: 23px;
    margin: 0 20px;
    border-bottom: 1px solid #ccc;
    color: #333;
}
.hot-dj-er {
	margin: 20px 0 0 20px;
}
.hot-dj-er li {
	float: left;
	zoom: 1;
    width: 210px;
    height: 50px;
}
.d-img {
	float: left;
	zoom: 1;
	margin-right: 10px;
}
.d-img img {
	width: 40px;
	height: 40px;
}
.d-info {
    float: left;
    zoom: 1;
    width: 160px;
    line-height: 21px;
    color: #666;
}
.d-info .dj {
    float: left;
    zoom: 1;
    color: #000;
}
.d-info p {
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.h-icon {
    display: inline-block;
    vertical-align: middle;
    margin-top: -1px;
	width: 11px;
    height: 13px;
    background: url(img/icon.png) no-repeat 0 1px;
}
</style>
</head>
<body>
	
<!-- 头部开始 -->
<header class="h-top">

	<div class="t-top clearFix">

		<div class="t-wrap">
			
			<!-- logo开始 -->
			<h1 class="logo"><a href="index.html" class="fl">网易云音乐</a></h1>  <!-- href:超链接 -->
			<!-- logo结束 -->

			<!-- 导航栏标签开始 -->
			<nav class="top-nav fl">
				<a href="#" class="active"><span>发现音乐</span><i class="cor"></i></a>
				<a href="#"><span>我的音乐</span><i class="cor"></i></a>      
				<a href="#"><span>朋友</span><i class="cor"></i></a>
				<a href="#"><span>商城</span></a><i class="cor"></i></span>
				<a href="#"><span>音乐人</span></a><i class="cor"></i></span>
				<a href="#" class="last"><span>下载客户端</span><i class="hot"></i></a>	
			</nav>
			<!-- 导航栏标签结束 -->

			<!-- 头部登录开始 -->
			<div class="landing fr">
				<a href="#" class="link fr">登陆</a>
				<div class="down-tab">
					<ul class="d-list">
						<li><a href="#"><i class="d-icon d-icon1"></i>手机号登录</a></li>
						<li><a href="#"><i class="d-icon d-icon2"></i>微信登录</a></li>
						<li><a href="#"><i class="d-icon d-icon3"></i>QQ号登录</a></li>
						<li><a href="#"><i class="d-icon d-icon4"></i>新浪微博登录</a></li>
						<li><a href="#"><i class="d-icon d-icon5"></i>网易邮箱账号登录</a></li>
					</ul>
				</div>
			</div>
			<!-- 头部登录结束 -->

			<!-- 搜素框开始 -->
			<form class="search fr">
				<input type="text" class="" value="单曲/歌手/专辑/歌单/MV/用户"/>
			</form>
			<!-- 搜素框结束 -->

		</div>

	</div>

	<!-- 二级导航栏 -->
	<div class="n-nav clearFix">
		<div class="n-wrap">
			<nav class="nav fl">
				<a href="index.html" class="n-active"><span>推荐</span></a>
				<a href="ranking.html"><span>排行榜</span></a>
				<a href="sheet.html"><span>歌单</span></a>
				<a href="radio.html"><span>主播电台</span></a>
				<a href="#"><span>歌手</span></a>
				<a href="#"><span>新碟上架</span></a>
			</nav>
		</div>
	</div>
	<!-- 二级导航栏 -->

</header>

<!-- 头部结束 -->

<div class="banner">
	
	<!-- 轮播图开始 -->
	<ul class="i-banner clearFix">
		
		<!-- 轮播图基本组件 -->
		<li class="i-bg">
			<div class="b-wrap">
				<a href="#">
					<img src="img/banner/1.jpg"/>
				</a>
				<a href="#" class="btnL"></a>
				<a href="#" class="btnR"></a>
				<div class="dot">
					<a href="#" class="i-active"></a>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
				</div>
				<div class="download">
					<a href="#" class="btn">下载客户端</a>
					<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
				</div>
			</div>
		</li>
		<!-- 轮播图基本组件 -->

		<li class="i-bg2">
			<div class="b-wrap">
				<a href="#">
					<img src="img/banner/2.jpg"/>
				</a>
				<a href="#" class="btnL"></a>
				<a href="#" class="btnR"></a>
				<div class="dot">
					<a href="#"></a>
					<a href="#" class="i-active"></a>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
				</div>
				<div class="download">
					<a href="#" class="btn">下载客户端</a>
					<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
				</div>
			</div>
		</li>

		<li class="i-bg3">
			<div class="b-wrap">
				<a href="#">
					<img src="img/banner/3.jpg"/>
				</a>
				<a href="#" class="btnL"></a>
				<a href="#" class="btnR"></a>
				<div class="dot">
					<a href="#"></a>
					<a href="#"></a>
					<a href="#" class="i-active"></a>
					<a href="#"></a>
					<a href="#"></a>
				</div>
				<div class="download">
					<a href="#" class="btn">下载客户端</a>
					<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
				</div>
			</div>
		</li>

		<li class="i-bg4">
			<div class="b-wrap">
				<a href="#">
					<img src="img/banner/4.jpg"/>
				</a>
				<a href="#" class="btnL"></a>
				<a href="#" class="btnR"></a>
				<div class="dot">
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#" class="i-active"></a>
					<a href="#"></a>
				</div>
				<div class="download">
					<a href="#" class="btn">下载客户端</a>
					<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
				</div>
			</div>
		</li>

		<li class="i-bg5">
			<div class="b-wrap">
				<a href="#">
					<img src="img/banner/5.jpg"/>
				</a>
				<a href="#" class="btnL"></a>
				<a href="#" class="btnR"></a>
				<div class="dot">
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#" class="i-active"></a>
				</div>
				<div class="download">
					<a href="#" class="btn">下载客户端</a>
					<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
				</div>
			</div>
		</li>

	</ul>
	<!-- 轮播图结束 -->
</div>


<main class="main">
	<div class="m-wrap">
		<div class="m-left">
			<section>

				<!-- 热门推荐标题开始 -->
				<header class="h-title">
					<h2><a href="#">热门推荐</a></h2>
					<nav class="h-list">
						<a href="#">华语</a>
						<span class="line">|</span>
						<a href="#">流行</a>
						<span class="line">|</span>
						<a href="#">摇滚</a>
						<span class="line">|</span>
						<a href="#">民谣</a>
						<span class="line">|</span>
						<a href="#">电子</a>
					</nav>
					<span class="more"><a href="#">更多</a><i>&nbsp;</i></span>
				</header>
				<!-- 热门推荐标题结束 -->

				<ul class="h-music clearFix">

					<!-- 专辑封面组件 -->
					<li>
						<div class="h-img">
							<a href="#">
								<img src="img/hotrecom/01.jpg"/>
								<span class="bg"></span>
								<span class="icon"></span>
								<span class="txt">74万</span>
							</a>
							<a href="#" class="play" title="播放"></a>
						</div>
						<p><a href="#">听过他们写的歌，却不曾闻其名</a></p>
					</li>
					<!-- 专辑封面组件 -->

					<li>
						<div class="h-img">
							<a href="#">
								<img src="img/hotrecom/02.jpg"/>
								<span class="bg"></span>
								<span class="icon"></span>
								<span class="txt">22万</span>
							</a>
							<a href="#" class="play" title="播放"></a>
						</div>
						<p><a href="#">◎小众无前奏 || 一秒陷入韩式温柔</a></p>
					</li>

					<li>
						<div class="h-img">
							<a href="#">
								<img src="img/hotrecom/03.jpg"/>
								<span class="bg"></span>
								<span class="icon"></span>
								<span class="txt">55万</span>
							</a>
							<a href="#" class="play" title="播放"></a>
						</div>
						<p><a href="#">「攻声集」群攻并起逐天下</a></p>
					</li>

					<li>
						<div class="h-img">
							<a href="#">
								<img src="img/hotrecom/04.jpg"/>
								<span class="bg"></span>
								<span class="icon"></span>
								<span class="txt">12万</span>
							</a>
							<a href="#" class="play" title="播放"></a>
						</div>
						<p><span class="djvideo"></span><a href="#"> 001 公子夏天</a></p>
					</li>

					<li>
						<div class="h-img">
							<a href="#">
								<img src="img/hotrecom/05.jpg"/>
								<span class="bg"></span>
								<span class="icon"></span>
								<span class="txt">102万</span>
							</a>
							<a href="#" class="play" title="播放"></a>
						</div>
						<p><a href="#">［真实感］绝佳的英伦摇滚现场</a></p>
					</li>

					<li>
						<div class="h-img">
							<a href="#">
								<img src="img/hotrecom/06.jpg"/>
								<span class="bg"></span>
								<span class="icon"></span>
								<span class="txt">74737</span>
							</a>
							<a href="#" class="play" title="播放"></a>
						</div>
						<p><span class="djvideo"></span><a href="#"> 一天中的静止时光</a></p>
					</li>

					<li>
						<div class="h-img">
							<a href="#">
								<img src="img/hotrecom/07.jpg"/>
								<span class="bg"></span>
								<span class="icon"></span>
								<span class="txt">61万</span>
							</a>
							<a href="#" class="play" title="播放"></a>
						</div>
						<p><a href="#">『東方雅乐｜和风意境純音赏』</a></p>
					</li>

					<li>
						<div class="h-img">
							<a href="#">
								<img src="img/hotrecom/08.jpg"/>
								<span class="bg"></span>
								<span class="icon"></span>
								<span class="txt">12691</span>
							</a>
							<a href="#" class="play" title="播放"></a>
						</div>
						<p><span class="djvideo"></span><a href="#"> 汉宣帝：从犯人到皇帝</a></p>
					</li>
				</ul>
			</section>

			<!-- 这是一个无聊的广告开始 -->
			<div id="m-banner">
				<a href="#">
					<img src="img/m-banner.jpg"/>
				</a>
			</div>
			<!-- 这是一个无聊的广告结束 -->

			<section>

				<!-- 新碟上架开始 -->
				<header class="h-title">
					<h2><a href="#">新碟上架</a></h2>
					<span class="more"><a href="#">更多</a><i>&nbsp;</i></span>
				</header>
				<!-- 新碟上架结束 -->

				<div class="disk clearFix">
					<a href="#" class="tit titL">&nbsp;</a>
					<div class="dd-list">
						<ul class="clearFix">

							<!-- 新碟上架组件开始 -->
							<li class="d-disk">
								<div class="dd-img">
									<img src="img/disk/01.jpg"/>
									<a href="#" class="p-disk"></a>
									<a href="#" class="diskplay"></a>
								</div>
								<p><a href="#">AVĪCI (01)</a></p>
								<p class="singer"><a href="#">Avicii</a></p>						
							</li>
							<!-- 新碟上架组件结束 -->

							<li class="d-disk">
								<div class="dd-img">
									<img src="img/disk/02.jpg"/>
									<a href="#" class="p-disk"></a>
									<a href="#" class="diskplay"></a>
								</div>
								<p><a href="#">海胆&谁来剪月光</a></p>
								<p class="singer"><a href="#">陈奕迅</a></p>						
							</li>
							<li class="d-disk">
								<div class="dd-img">
									<img src="img/disk/03.jpg"/>
									<a href="#" class="p-disk"></a>
									<a href="#" class="diskplay"></a>
								</div>
								<p><a href="#">박진영의 파티피플</a></p>
								<p class="singer"><a href="#">V.A.</a></p>						
							</li>
							<li class="d-disk">
								<div class="dd-img">
									<img src="img/disk/04.jpg"/>
									<a href="#" class="p-disk"></a>
									<a href="#" class="diskplay"></a>
								</div>
								<p><a href="#">OK?</a></p>
								<p class="singer"><a href="#">Nissy(西島隆弘)</a></p>						
							</li>
							<li class="d-disk">
								<div class="dd-img">
									<img src="img/disk/05.jpg"/>
									<a href="#" class="p-disk"></a>
									<a href="#" class="diskplay"></a>
								</div>
								<p><a href="#">Rainbow</a></p>
								<p class="singer"><a href="#">Kesha</a></p>						
							</li>
						</ul>
					</div>
					<a href="#" class="tit titR">&nbsp;</a>
				</div>
			</section>
			<section>
				<header class="h-title">
					<h2><a href="#">榜单</a></h2>
					<span class="more"><a href="#">更多</a><i>&nbsp;</i></span>
				</header>
				<div class="n-list clearFix">
					<dl class="sec">
						<dt class="top">
							<div class="l-img">
								<img src="img/list/2.jpg"/>
								<a href="#" class="msk"></a>
							</div>
							<div class="titl">
								<h3 class="l-title"><a href="#">云音乐飙升榜</a></h3>
								<div class="btn">
									<a href="#" class="l-play">播放</a>
									<a href="#" class="l-collection">收藏</a>
								</div>
							</div>
						</dt>
						<dd>
							<ol>
								<li>
									<span class="num numb">1</span>
									<a href="#" class="song">Love Should Be So Hard(Extended+Mix)</a>
									<nav class="p-list">
										<a href="#" class="p-play"></a>
										<a href="#" class="P-add"></a>
										<a href="#" class="p-collection"></a>
									</nav>
								</li>
								<li>
									<span class="num numb">2</span>
									<a href="#" class="song">火锅底料</a>
									<nav class="p-list">
										<a href="#" class="p-play"></a>
										<a href="#" class="P-add"></a>
										<a href="#" class="p-collection"></a>
									</nav>
								</li>
								<li>
									<span class="num numb">3</span>
									<a href="#" class="song">欠你的歌</a>
									<nav class="p-list">
										<a href="#" class="p-play"></a>
										<a href="#" class="P-add"></a>
										<a href="#" class="p-collection"></a>
									</nav>
								</li>
								<li>
									<span class="num">4</span>
									<a href="#" class="song">带你去旅行</a>
									<nav class="p-list">
										<a href="#" class="p-play"></a>
										<a href="#" class="P-add"></a>
										<a href="#" class="p-collection"></a>
									</nav>
								</li>
								<li>
									<span class="num">5</span>
									<a href="#" class="song">带你去旅行</a>
									<nav class="p-list">
										<a href="#" class="p-play"></a>
										<a href="#" class="P-add"></a>
										<a href="#" class="p-collection"></a>
									</nav>
								</li>
								<li>
									<span class="num">6</span>
									<a href="#" class="song">欧皇</a>
									<nav class="p-list">
										<a href="#" class="p-play"></a>
										<a href="#" class="P-add"></a>
										<a href="#" class="p-collection"></a>
									</nav>
								</li>
								<li>
									<span class="num">7</span>
									<a href="#" class="song">不用去猜</a>
									<nav class="p-list">
										<a href="#" class="p-play"></a>
										<a href="#" class="P-add"></a>
										<a href="#" class="p-collection"></a>
									</nav>
								</li>
								<li>
									<span class="num">8</span>
									<a href="#" class="song">花鸟卷 Remix</a>
									<nav class="p-list">
										<a href="#" class="p-play"></a>
										<a href="#" class="P-add"></a>
										<a href="#" class="p-collection"></a>
									</nav>
								</li>
								<li>
									<span class="num">9</span>
									<a href="#" class="song">五险一金</a>
									<nav class="p-list">
										<a href="#" class="p-play"></a>
										<a href="#" class="P-add"></a>
										<a href="#" class="p-collection"></a>
									</nav>
								</li>
								<li>
									<span class="num">10</span>
									<a href="#" class="song">Super Tizzy</a>
									<nav class="p-list">
										<a href="#" class="p-play"></a>
										<a href="#" class="P-add"></a>
										<a href="#" class="p-collection"></a>
									</nav>
								</li>
							</ol>
							<div class="s-all">
								<a href="#">查看全部&gt;</a>
							</div>
						</dd>
					</dl>
					<dl class="sec">
						<dt class="top">
							<div class="l-img">
								<img src="img/list/1.jpg"/>
								<a href="#" class="msk"></a>
							</div>
							<div class="titl">
								<h3 class="l-title"><a href="#">云音乐新歌榜</a></h3>
								<div class="btn">
									<a href="#" class="l-play">播放</a>
									<a href="#" class="l-collection">收藏</a>
								</div>
							</div>
						</dt>
						<dd>
							<ol>
								<li>
									<span class="num numb">1</span>
									<a href="#" class="song">欧皇</a>
									<nav class="p-list">
										<a href="#" class="p-play"></a>
										<a href="#" class="P-add"></a>
										<a href="#" class="p-collection"></a>
									</nav>
								</li>
								<li>
									<span class="num numb">2</span>
									<a href="#" class="song">Friends</a>
									<nav class="p-list">
										<a href="#" class="p-play"></a>
										<a href="#" class="P-add"></a>
										<a href="#" class="p-collection"></a>
									</nav>
								</li>
								<li>
									<span class="num numb">3</span>
									<a href="#" class="song">老大</a>
									<nav class="p-list">
										<a href="#" class="p-play"></a>
										<a href="#" class="P-add"></a>
										<a href="#" class="p-collection"></a>
									</nav>
								</li>
								<li>
									<span class="num">4</span>
									<a href="#" class="song">带你去旅行</a>
									<nav class="p-list">
										<a href="#" class="p-play"></a>
										<a href="#" class="P-add"></a>
										<a href="#" class="p-collection"></a>
									</nav>
								</li>
								<li>
									<span class="num">5</span>
									<a href="#" class="song">火锅底料</a>
									<nav class="p-list">
										<a href="#" class="p-play"></a>
										<a href="#" class="P-add"></a>
										<a href="#" class="p-collection"></a>
									</nav>
								</li>
								<li>
									<span class="num">6</span>
									<a href="#" class="song">打上花火</a>
									<nav class="p-list">
										<a href="#" class="p-play"></a>
										<a href="#" class="P-add"></a>
										<a href="#" class="p-collection"></a>
									</nav>
								</li>
								<li>
									<span class="num">7</span>
									<a href="#" class="song">九重山</a>
									<nav class="p-list">
										<a href="#" class="p-play"></a>
										<a href="#" class="P-add"></a>
										<a href="#" class="p-collection"></a>
									</nav>
								</li>
								<li>
									<span class="num">8</span>
									<a href="#" class="song">春夏秋冬</a>
									<nav class="p-list">
										<a href="#" class="p-play"></a>
										<a href="#" class="P-add"></a>
										<a href="#" class="p-collection"></a>
									</nav>
								</li>
								<li>
									<span class="num">9</span>
									<a href="#" class="song">欠你得歌</a>
									<nav class="p-list">
										<a href="#" class="p-play"></a>
										<a href="#" class="P-add"></a>
										<a href="#" class="p-collection"></a>
									</nav>
								</li>
								<li>
									<span class="num">10</span>
									<a href="#" class="song">Love Should Be So Hard(Extended+Mix)</a>
									<nav class="p-list">
										<a href="#" class="p-play"></a>
										<a href="#" class="P-add"></a>
										<a href="#" class="p-collection"></a>
									</nav>
								</li>
							</ol>
							<div class="s-all">
								<a href="#">查看全部&gt;</a>
							</div>
						</dd>
					</dl>
					<dl class="sec sec2">
					<dt class="top">
						<div class="l-img">
							<img src="img/list/3.jpg"/>
							<a href="#" class="msk"></a>
						</div>
						<div class="titl">
							<h3 class="l-title"><a href="#">网易原创歌曲榜</a></h3>
							<div class="btn">
								<a href="#" class="l-play">播放</a>
								<a href="#" class="l-collection">收藏</a>
							</div>
						</div>
					</dt>
					<dd>
						<ol>
							<li>
								<span class="num numb">1</span>
								<a href="#" class="song">Love Should Be So Hard(Extended+Mix)</a>
								<nav class="p-list">
									<a href="#" class="p-play"></a>
									<a href="#" class="P-add"></a>
									<a href="#" class="p-collection"></a>
								</nav>
							</li>
							<li>
								<span class="num numb">2</span>
								<a href="#" class="song">Friends</a>
								<nav class="p-list">
									<a href="#" class="p-play"></a>
									<a href="#" class="P-add"></a>
									<a href="#" class="p-collection"></a>
								</nav>
							</li>
							<li>
								<span class="num numb">3</span>
								<a href="#" class="song">Change The World</a>
								<nav class="p-list">
									<a href="#" class="p-play"></a>
									<a href="#" class="P-add"></a>
									<a href="#" class="p-collection"></a>
								</nav>
							</li>
							<li>
								<span class="num">4</span>
								<a href="#" class="song">你不是我心里的一首歌</a>
								<nav class="p-list">
									<a href="#" class="p-play"></a>
									<a href="#" class="P-add"></a>
									<a href="#" class="p-collection"></a>
								</nav>
							</li>
							<li>
								<span class="num">5</span>
								<a href="#" class="song">告白水球</a>
								<nav class="p-list">
									<a href="#" class="p-play"></a>
									<a href="#" class="P-add"></a>
									<a href="#" class="p-collection"></a>
								</nav>
							</li>
							<li>
								<span class="num">6</span>
								<a href="#" class="song">神话镇</a>
								<nav class="p-list">
									<a href="#" class="p-play"></a>
									<a href="#" class="P-add"></a>
									<a href="#" class="p-collection"></a>
								</nav>
							</li>
							<li>
								<span class="num">7</span>
								<a href="#" class="song">邪火焚世</a>
								<nav class="p-list">
									<a href="#" class="p-play"></a>
									<a href="#" class="P-add"></a>
									<a href="#" class="p-collection"></a>
								</nav>
							</li>
							<li>
								<span class="num">8</span>
								<a href="#" class="song">那首歌唱的很难听</a>
								<nav class="p-list">
									<a href="#" class="p-play"></a>
									<a href="#" class="P-add"></a>
									<a href="#" class="p-collection"></a>
								</nav>
							</li>
							<li>
								<span class="num">9</span>
								<a href="#" class="song">欠我的幸福</a>
								<nav class="p-list">
									<a href="#" class="p-play"></a>
									<a href="#" class="P-add"></a>
									<a href="#" class="p-collection"></a>
								</nav>
							</li>
							<li>
								<span class="num">10</span>
								<a href="#" class="song">你是谁心中的一首歌</a>
								<nav class="p-list">
									<a href="#" class="p-play"></a>
									<a href="#" class="P-add"></a>
									<a href="#" class="p-collection"></a>
								</nav>
							</li>
						</ol>
						<div class="s-all">
							<a href="#">查看全部&gt;</a>
						</div>
					</dd>
				</dl>
				</div>
			</section>
		</div>
		<div class="m-right">
			<div class="tab">
				<div class="user">
					<p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
					<a href="#">用户登录</a>
				</div>
				<section class="m-singer">
					<h3>
						<p>入驻歌手</p>
						<a href="#">查看更多&gt;</a>
					</h3>
					<ul class="clearFix">
						<li>
							<a href="#">
								<div class="s-photo">
									<img src="img/singer/1.jpg"/>
								</div>
								<div class="s-info">
									<h4>张惠妹aMEI</h4>
									<p>台湾歌手张惠妹</p>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="s-photo">
									<img src="img/singer/2.jpg"/>
								</div>
								<div class="s-info">
									<h4>Fine乐团</h4>
									<p>独立音乐人</p>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="s-photo">
									<img src="img/singer/3.jpg"/>
								</div>
								<div class="s-info">
									<h4>Jony_J</h4>
									<p>说唱歌手</p>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="s-photo">
									<img src="img/singer/4.jpg"/>
								</div>
								<div class="s-info">
									<h4>Panta点打不出来Q</h4>
									<p>电子制作人</p>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="s-photo">
									<img src="img/singer/5.jpg"/>
								</div>
								<div class="s-info">
									<h4>音乐人赵雷</h4>
									<p>民谣歌手</p>
								</div>
							</a>
						</li>
					</ul>
					<div class="apply">
						<a href="#">
							<span>申请成为网易音乐人</span>
						</a>
					</div>
				</section>
				<section class="hotdj">
					<h3>热门DJ</h3>
					<ul class="hot-dj-er clearFix">
						<li>
							<a href="#" class="d-img">
								<img src="img/singer/dj.jpg"/>
							</a>
							<div class="d-info">
								<p>
									<a href="#" class="dj">陈立</a>
									<i class="h-icon"></i>
								</p>
								<p>心理学家、美食家陈立教授</p>
							</div>
						</li>
						<li>
							<a href="#" class="d-img">
								<img src="img/singer/dj2.jpg"/>
							</a>
							<div class="d-info">
								<p>
									<a href="#" class="dj">DJ艳秋</a>
									<i class="h-icon"></i>
								</p>
								<p>著名音乐节目主持人</p>
							</div>
						</li>
						<li>
							<a href="#" class="d-img">
								<img src="img/singer/dj3.jpg"/>
							</a>
							<div class="d-info">
								<p>
									<a href="#" class="dj">国家大剧院古典音乐频道</a>
									<i class="h-icon"></i>
								</p>
								<p>国家大剧院古典音乐官方</p>
							</div>
						</li>
						<li>
							<a href="#" class="d-img">
								<img src="img/singer/dj4.jpg"/>
							</a>
							<div class="d-info">
								<p>
									<a href="#" class="dj">谢谢收听</a>
									<i class="h-icon"></i>
								</p>
								<p>南京电台主持人王馨</p>
							</div>
						</li>
						<li>
							<a href="#" class="d-img">
								<img src="img/singer/dj5.jpg"/>
							</a>
							<div class="d-info">
								<p>
									<a href="#" class="dj">DJ晓苏</a>
									<i class="h-icon"></i>
								</p>
								<p>独立DJ，CRI环球旅游广播特邀DJ</p>
							</div>
						</li>
					</ul>
				</section>
			</div>
		</div>
	</div>
</main>
<footer class="bottom">
	<div class="f-footer">
		<div class="f-wrap">
			<div class="f-left fl">
				<nav>
					<a href="#">关于网易</a>
					<span class="line">|</span>
					<a href="#">客户服务</a>
					<span class="line">|</span>
					<a href="#">服务条款</a>
					<span class="line">|</span>
					<a href="#">网站导航</a>
					<span class="line">|</span>
					<a href="#">意见反馈</a></nav>
				<P>网易公司版权所有©1997-2017<span class="company">杭州乐读科技有限公司运营：<a href="#">浙网文[2015]0415-135号</a></span></P>
			</div>
			<ul class="f-right fr">
				<li class="f-musicia f-logo"><a href="#">独立音乐人</a></li>
				<li><a href="#" class="f-logo f-logo2">音乐专栏</a></li>
				<li><a href="#" class="f-logo f-logo3">自媒</a></li>
				<li><a href="#" class="f-logo f-logo4">赞赏</a></li>
			</ul>
		</div>
	</div>
</footer>
</body>
</html>
